<!--
 * @FileDescription: 搜索框组件
 * @Author: 小威吃饱了
 * @Date: 2022/5/30
 * @LastEditors: 小威吃饱了
 * @LastEditTime: 2022/5/30
 -->
<template>
  <div class="search-component">
    <div class="input-box">
      <input
        type="text"
        placeholder="请输入你的内容"
        @input="setScore"
        :value="searchedScore"
      />
    </div>
    <div class="btn">
      <button 
      @click="setFileterRegular('bilibili')" 
      :class="['regular-btn',{active: filterRegular === 'bilibili'}]" 
      >bilibili</button>
      <button 
      @click="setFileterRegular('zfrontier')" 
      :class="['regular-btn',{active: filterRegular === 'zfrontier'}]"
      >zfrontier</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Search',
  data() {
    return {
      searchedScore: null,  //初始搜索值为null
      filterRegular:'zfrontier' //搜索按钮默认是zfrontier
    }
  },
  methods: {
    setScore(e) {
      this.searchedScore=e.target.value; //获取搜索栏中的值
      console.log(this.setFileterRegular)
    },
    setFileterRegular(regular) {
      this.filterRegular=regular; //判断谁触发active样式
      console.log(regular,this.filterRegular,this.searchedScore)
      if (regular == 'bilibili'){
        var url = 'https://search.bilibili.com/all?keyword=' + this.searchedScore; //bilibili搜索引擎
        window.open(url);
        console.log("触发BILIBILI")
      }
      else{
        var ur2 = 'https://www.zfrontier.com/app/search/' +this.searchedScore; //zfrontier搜索引擎
        window.open(ur2);
        console.log("触发ZFRONTIER")
      }
    }
  }
}
</script>

<style>
.input-box {
  display: flex;
}
input {
  width: 80vw;
  height: 10vh;
  background: #fcf9f2;
  border: 4px solid #698cb0;
  border-radius: 15px;
  font-size: 25px;
  margin: 0vh 10vw auto 10vw;
}
.btn {
  display: flex;
  margin-top: 2vh;
  width: 80%;
  height: 10%;
  justify-items: center;
  margin-left: 10%;
}
.regular-btn {
  width: 40%;
  height: 30px;
  font-size: 15px;
  background: #fcf9f2;
  border: 4px solid #698cb0;
  border-radius: 10px;
  margin-left: 5%;
}
.active {
  width: 40%;
  height: 30px;
  font-size: 15px;
  background: #698cb0;
  border: 4px solid #ffeec8;
  border-radius: 10px;
  margin-left: 5%;
}
</style>
